\documentclass[a4paper,11pt,oneside]{report}
\usepackage[german]{hgb}	 % options: german, english
\usepackage{listings}
\graphicspath{{images/}}   	% where are the EPS images?

%%%----------------------------------------------------------
\begin{document}
%%%----------------------------------------------------------

\author{Philipp Naderer}
	     
\title{QSE-ASE-08 \\  
        Tenez \\
        Helma Einführung}

\date{21. Oktober 2009}

%%%----------------------------------------------------------
\maketitle
\tableofcontents
%%%----------------------------------------------------------


%%%----------------------------------------------------------
\chapter{Grundbegriffe}
%%%----------------------------------------------------------

\section{Was muss man downloaden?}
Download vom aktuellen Helma 1.7 Release Candidate geht unter folgender URL: http://adele.helma.org/download/helma/1.7.0-rc3/

Warum setzen wir schon Helma 1.7 ein? Mit Helma 1.7 kommen Unit Tests ins Helma Framework und die sind zwingend für unser Projekt erforderlich. Außerdem steht Helma 1.7 kurz vor der Veröffentlichung und bringt viele Verbesserungen zur Release 1.6.

\section{Installation}
Einfach das ZIP extrahieren und an einem Platz im Filesystem ablegen. Danach kann man in der start.bat bzw. start.sh die Ports festlegen, mit denen Helma gestartet wird. Ratsam: Port 8080 für HTTP. Danach das Startskript ausführen und schon läuft Helma.

Jetzt müssen wir die Management Konsole aktivieren. Unter der URL http://localhost:8080/manage/makekey lässt sich ein User + Passwort generieren. Da wir nur lokal arbeiten, empfiehlt sich admin mit Passwort admin. Die so generierte Zeile muss man am Schluss in den server.properties eintragen.

Wenn man die Zeile eingefügt hat, kann man unter http://localhost:8080/manage/main auf die Adminkonsole zugreifen. Links sieht man alle aktuellen Applikationen, die von Helma gefunden werden. Man kann sie so einfach neu starten oder mit "flush" den Helma-Cache entleeren. Nach einem Flush holt sich Helma alle Objekte frisch aus der Datenbank.

Nun läuft Helma und man kann eine erste Hello World Applikation erstellen.

\section{Hello World}
Im /apps-Verzeichnis von Helma legen wir eine neue Applikation an, in dem man einen neuen Ordner mit dem Namen der Applikation erstellen. In unserem Fall einfach "helloworld". Wenn man jetzt in die Management Konsole schaut, sieht man danach schon die Applikation in der Übersicht.

Es gibt nun 2 Wege zum Starten: In der Management Konsole, wobei dieser Weg kaum benutzt wird. Oder wir tragen die Applikation in die Datei apps.properties ein. Der Mountpoint legt fest, unter welcher URL die Applikation eingehängt wird. In unserem Fall http://localhost:8080/hello/ - ruft man diese URL zum jetzigen Zeitpunkt auf, sollte Helma noch einen Error liefern, da wir ja noch keine Ausgabe programmiert haben. Das Repository legt fest, wo der Code zu finden ist, den Helma zur Applikation laden soll. Mit Hilfe der Nummer kann man eine Reihung festlegen, also z.B. Code aus unterschiedlichen Verzeichnissen laden. Das wird später im Projekt eine wichtige Rolle spielen, denn so kann man das Datenmodell und die Business Logic in ein Verzeichnis /base ablegen und z.B. das Frontend in ein Verzeichnis /frontend und beide als Code Repository angeben. Also z.B. tenez.repository.0 = ./apps/tenez/base und tenez.repository.1 = ./apps/tenez/frontend!

\begin{lstlisting}[caption=apps.properties Eintrag für HelloWorld]
# Hello World
helloworld
helloworld.mountpoint = /hello
helloworld.repository.0 = ./apps/helloworld
\end{lstlisting}

Sobald diese Zeilen in die apps.properties eingefügt sind, ist die Applikation gestartet. Um sie zu beenden bzw. zu deaktiveren, kommentiert man einfach die erste Zeile mit \# aus. Helma bekommt diese Änderung relativ rasch – meist nur eine Sekunde – mit und stoppt die Applikation.

Nun erstellen wir ein Verzeichnis Root in unserer Applikation, also /apps/helloworld/Root. Nun haben wir das Wurzelklasse für die Applikation angelegt und können hier Actions anlegen, die dann aufgerufen werden können. Die main\_action ist dabei wie eine index.html-Datei, sie ist also die Default-Action für einen bestimmten Pfad.

Wir führen folgenden Dateinamens-Konvention ein: Actions werden immer die Datei PROTOYPE.actions.js geschrieben, Macros ist in PROTOTYPE.macros.js und Business Logic in PROTOTYPE.js Unsere main\_action muss also in die Datei apps/helloworld/Root/Root.actions.js abgelegt werden.

\begin{lstlisting}[caption=Root.actions.js]
var main_action = function() {
   res.write("Hello World!");
   
   if (req.params["name"]) {
      res.write("Your name is: " + req.params["name"]);
   }
}
\end{lstlisting}

Unter http://localhost:8080/hello/ wird nun "Hello World!" ausgegeben. Geben wir zusätzlich einen GET- oder POST-Parameter name an, wird dieser zusätzlich ausgegeben.

\section{JavaScript und Objekte}
JavaScript heißt eigentlich ECMAScript und ist auch unter diesem Namen standardisiert. Es ist schlanke, dynamisch typisierte, objektorientierte, Skriptsprache. Es gibt keine Klassen, jedoch basieren Objekte auf Prototypen. Aus Wikipedia: "Prototypenbasierte Programmierung, auch als klassenlose Objektorientierung bekannt, ist eine Form der Objektorientierten Programmierung, die auf das Sprachelement der Klasse verzichtet. Objekte werden durch das Clonen bereits existierender Objekte erzeugt. Beim Clonen werden alle Eigenschaften (Attribute und Methoden) vom Prototyp-Objekt geerbt und durch eigene Eigenschaften erweitert."

\textbf{Daher: Alles, was dem Prototype eines Objekts hinzugefügt wird, wird quasi der Klasse hinzugefügt. Dies ist vergleichbar mit statischen Methoden bzw. statischen Variablen in Java.}

\begin{lstlisting}[caption=Prototype in der Praxis]
function Person(name) {
   this.name = name;
   // lastAdded bzw. whoAmI sind fuer alle von aus
   // Person erzeugten die gleichen Referenzen!
   // Vergleichbar mit static in Java
   Person.prototype.lastAdded = name;
   Person.prototype.whoAmI = function() { return this.name; };
}

var rudi = new Person("Rudi");
var otto = new Person("Otto");

otto.name = "Otto der Grosse";

console.log(otto.whoAmI());
console.log(otto.lastAdded);
console.log(rudi.lastAdded);
console.log(rudi.whoAmI());

/* Ausgabe im Firebug */
Otto der Grosse
Otto
Otto
Rudi
\end{lstlisting}

%%%----------------------------------------------------------
\chapter*{Versionsprotokoll}
%%%----------------------------------------------------------

\begin{tabular}{ l l l l}
	v1.0 & 23.10.2009 & Philipp Naderer & Erste Version vom Tutorial \\
\end{tabular}


%%%----------------------------------------------------------
\end{document}
%%%----------------------------------------------------------